<!DOCTYPE html>
<html>
  <head>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <msg></msg>
       <add></add>


    </div>
    <script>
      const bus=new Vue()

      const msg={
          template:'<p>当前购物车商品数量为:{{count}}</p>',
          data(){
              return{
                  count:0
              }
          },
          created(){
              bus.$on('addcart',(val)=>{
                  this.count+=val
              })
          }

      }

      const add={
          template:'<input type="button" value="数量+1" @click="cm"/>',
          methods:{
              cm(){
                bus.$emit('addcart',2)
              }
          }
      }

    const vm = new Vue({
      el: '#app',
        components:{
          add,
            msg
        }
    })
    </script>
  </body>
</html>